<template>
  <div class="expense-details-head">
    <a-descriptions :class="from!=='high' ? 'line':'high'">
      <div class="descriptions-title" slot="title">
        <span class="title">{{ title }}</span>
        <a-form layout="inline">
          <a-form-item :label="$t('all.autotext949')">
            <a-select
              v-model="currentCenter"
              style="width: 240px;"
              @change="handleResearchChange"
              allowClear
              show-search
              filter
              option-filter-prop="children"
            >
              <a-select-option v-for="item in researchCenterOptions" :key="item.id" :value="item.id">
                <a-tooltip :title="item.researchCenterNo + '-' + item.orgName">
                  {{ item.researchCenterNo }}-{{ item.orgName }}
                </a-tooltip>
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 访视阶段 -->
          <a-form-item :label="$t('all.autotext1049')" v-if="type==2">
            <a-select
              v-model="stageId"
              style="width: 240px;"
              allowClear
              @change="listVisitStageChange"
              :disabled="!currentCenter"
            >
              <a-select-option v-for="item in listVisitStageOption" :value="item.stageId" :key="item.stageId">
                {{ item.stage }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 费用类目 -->
          <a-form-item :label="$t('all.autotext789')">
            <a-select
              v-model="applyType"
              style="width: 240px;"
              allowClear
              show-search
              filter
              @change="handleCategoryChange"
              :disabled="type==2 ? (!currentCenter || !stageId) : (!currentCenter)"
            >
              <a-select-option v-for="item in categoryOptions" :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-descriptions>
    <div class="expense-details-head__bars">
      <div class="bar-item" v-for="bar in barList" :key="bar.key">
        <div class="label">{{ bar.label }}</div>
        <div class="value">{{ bar.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import isUndefined from 'lodash/isUndefined'
import { listFeeCategory } from '@api/dashboard/dashboard'
export default {
  name: 'expense-details-board-head',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    researchCenterOptions: {
      type: Array,
      default: () => []
    },
    from: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    listVisitStageOption: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      currentCenter: '',
      applyType: '',
      categoryOptions: [],
      stageId: ''
    }
  },
  computed: {
    title () {
      return this.data.typeStr + (this.$i18n.locale === 'en-US' ? ' ' : '') + this.$t('all.autotext12')
    },
    barList () {
      // const { typeStr, detailedData = {} } = this.data || {}
      const { detailedData = {} } = this.data || {}
      const getValue = (value) => {
        return isUndefined(value) ? '--' : value
      }
      const barList = [
        // { label: typeStr + this.$t('all.autotext1264'), value: getValue(detailedData?.['distinctCount']) },
        { label: this.$t('all.autotext1666'), value: getValue(detailedData?.distinctCount) },
        { label: this.$t('all.autotext1045'), value: getValue(detailedData?.applyCount) },
        { label: this.$t('all.autotext194'), value: this.$t('money.unit') + getValue(detailedData?.applyTotalCount) },
        { label: this.$t('all.autotext29'), value: getValue(detailedData?.payCount) },
        { label: this.$t('all.autotext728'), value: this.$t('money.unit') + getValue(detailedData?.payAmount) }
      ]
      return barList
    }
  },
  methods: {
    handleCategoryChange () {
      this.$emit('switchCenter', this.currentCenter, this.stageId, this.applyType)
    },
    handleResearchChange () {
      this.$emit('switchCenter', this.currentCenter, '', '')
    },
    listVisitStageChange () {
      if (!this.stageId) {
        this.applyType = ''
      }
      this.$emit('switchCenter', this.currentCenter, this.stageId, '')
    },
    // 获取费用类目
    async listFeeCategory () {
      const res = await listFeeCategory({ proId: localStorage.getItem('CURRENT_PROID'), type: this.type })
      this.categoryOptions = res
    }
  },
  created () {
    this.listFeeCategory()
  }
}
</script>

<style scoped lang='less'>
.high{
  .title{
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
  }
}
.expense-details-head {
  padding-bottom: 16px;
  .descriptions-title {
    display: flex;
    justify-content: space-between;
    .ant-form {
      /deep/ .ant-form-item-label label{
        color: #031F47;
      }
    }
  }
  .expense-details-head__bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 100px;
    // border: 1px solid #CCD4E1;
    border-radius: 4px;
    .bar-item {
      position: relative;
      padding: 20px;
      &:not(:last-of-type)::after {
        display: inline-block;
        width: 1px;
        background-color: #CCD4E1;
        content: ' ';
        height: 50%;
        position: absolute;
        right: 0;
        top: 25%;
      }
      .label {
        font-size: 20px;
        color: #031F47;
      }
      .value {
        font-size: 32px;
        opacity: .87;
      }
    }
  }
}

</style>
